<div ng-include="'app/layout/FABGoBack.html'"></div>

<div class="legend" layout="row" layout-align="end center" show-gt-xs hide-xs>
    <div class="legendcolor statidentifier"></div>STAT/Urgent
    
    <div layout="row" ng-if="$root.ReferralCategory == 'Search'">
        <div class="legendcolor newidentifier"></div>New
        <div class="legendcolor inprocessidentifier"></div>In-Process
        <div class="legendcolor scheduledidentifier"></div>Scheduled
        <div class="legendcolor completedidentifier"></div>Completed
    </div>
</div>

<section id="category-view" class="mainbar layout layout-row layout-wrap" layout="column" layout-align="space-around">
    <div class="layout layout-row layout-wrap" layout="row" layout-align="space-around center">
        <md-card ng-repeat="Data in vm.PatientData" class="patientCard">
            <md-toolbar md-theme-watch class="layout" md-theme="{{Data.State}}">
                    <md-card-content>
                        <md-toolbar class="StatTitle" md-theme-watch md-theme="{{Data.StatRequest}}">
                            <div layout="row" layout-align="start center">
                                <div flex="70"><strong>Patient Demographics</strong></div>
                                <div layout="row" flex>
                                    <md-button class="md-icon-button" ng-click="vm.DeleteReferral(Data.ReferralID)" aria-label="Edit">
                                        <md-tooltip>Delete Referral</md-tooltip>
                                        <md-icon md-font-library="material-icons">&#xE92B;</md-icon>
                                        <!--<i class="material-icons">&#xE5D2;</i>-->
                                        <!--<ng-md-icon icon="menu"></ng-md-icon>-->
                                    </md-button>

                                    <md-button class="md-icon-button" ng-click="vm.ShowPatDemo(Data.ReferralID)" aria-label="Edit">
                                        <md-tooltip>Edit</md-tooltip>
                                        <md-icon md-font-library="material-icons">&#xE3C9;</md-icon>
                                        <!--<i class="material-icons">&#xE5D2;</i>-->
                                        <!--<ng-md-icon icon="menu"></ng-md-icon>-->
                                    </md-button>
                                </div>
                            </div>
                        </md-toolbar>
                        
                        <hr />

                        <div layout="row" layout-align="space-between center">
                            <div><strong>{{Data.LastName}}, {{Data.FirstName}}</strong></div>
                            <div><strong>DOB:</strong>{{Data.DOB}}</div>
                        </div>
                       <!-- <p><strong>{{Data.LastName}}, {{Data.FirstName}}<text-align="left">DOB:{{Data.DOB}}</text-align> </strong></p> -->
                       <!-- <p>Date ofbirth: {{Data.DOB}}</p> -->
                        <hr />
                        <div layout="row" layout-align="start center">
                            <div flex="80">
                                <strong>Diagnosis: {{Data.DiagnosisCount}}</strong>
                                <p>{{Data.ShortDiagnosis}}</p>
                                <md-tooltip class="tooltipdesc"><span>Primary Diagnosis: {{Data.PrimaryDiagnosis}}</span></md-tooltip>
                            </div>
                            <div flex>
                                <md-button class="md-icon-button" ng-click="vm.ShowPatDiagnosis(Data.ReferralID)" aria-label="Edit">
                                    <md-tooltip>Edit Diagnosis</md-tooltip>
                                    <md-icon md-font-library="material-icons">&#xE85D;</md-icon>
                                    <!--<i class="material-icons">&#xE5D2;</i>-->
                                    <!--<ng-md-icon icon="menu"></ng-md-icon>-->
                                </md-button>
                            </div>
                        </div>
                        <hr />
                        <div layout="row" layout-align="start center">
                            <div flex="100"><strong>Reason For Referral:</strong>
                            <p>{{Data.ShortReason}}</p>
                                <md-tooltip class="tooltipdesc"><span>{{Data.ReferralReason}}</span></md-tooltip>
                            </div>
                            <!--<div flex>
                                <md-button class="md-icon-button" ng-click="vm.ShowAttachments('MuraliVenugopalan')" aria-label="Edit">
                                    <md-tooltip>Edit Attachments</md-tooltip>
                                    <md-icon md-font-library="material-icons">&#xE2BC;</md-icon>
                                </md-button>
                            </div>-->
                        </div>
                        <hr />
                        <div layout="row" layout-align="start center">
                            <div flex="80"><strong>Process Referral</strong></div>
                            <div flex>
                                <md-button class="md-icon-button" ng-click="vm.ProcessReferral(Data.ReferralID)" aria-label="Edit">
                                    <md-tooltip>Process Referral</md-tooltip>
                                    <md-icon md-font-library="material-icons">&#xE877;</md-icon>
                                    <!--<i class="material-icons">&#xE5D2;</i>-->
                                    <!--<ng-md-icon icon="menu"></ng-md-icon>-->
                                </md-button>
                            </div>
                        </div>
                        <md-divider></md-divider>
                        <div layout="row" layout-align="start center">
                            <div flex="80">
                                <p>Last activity</p>
                                <md-tooltip class="tooltipdesc">{{Data.LastAction}}</md-tooltip>
                            </div>
                            <md-button class="md-icon-button" ng-click="vm.StatusDetail(Data.ReferralID)" aria-label="Edit">
                                <md-tooltip>Status Details</md-tooltip>
                                <md-icon md-font-library="material-icons">&#xE8E1;</md-icon>
                                <!--<i class="material-icons">&#xE5D2;</i>-->
                                <!--<ng-md-icon icon="menu"></ng-md-icon>-->
                            </md-button>
                        </div>
                        <hr />
                        <div layout="row" layout-align="center center">
                           <md-toolbar class="ReferralStatusView" md-theme-watch class="layout" md-theme="{{Data.CurrentStatus}}">
                                <p>
                                    <strong>Created:</strong> {{Data.CreatedBy}}<br/>
                                    <strong>Referring Physician:</strong> {{Data.RequestedBy}}<br />
                                    <strong>Referred Physician:</strong> {{Data.ReferredPhyisician}}
                                </p>
                            </md-toolbar>
                        </div>

                </md-card-content>          
            </md-toolbar>
        </md-card>
    </div>


</section>